<script lang="ts" setup>
import { Plus, Minus, Rank } from "@element-plus/icons-vue";
import draggable from "vuedraggable";
import { Model } from "./model";

const PageConfig = {
  //被操作实体的名称
  entity: "dic",
  entityName: "字典",
  hideDetailBtn: true,
  local_save: async (formData: any) => {
    let error_msg = "";
    dicList.value.forEach((item) => {
      if (!item.code) {
        error_msg = "字典列表中的【键】不能为空";
        return;
      }
      if (!item.label) {
        error_msg = "字典列表中的【值】不能为空";
      }
    });
    if (error_msg) {
      callbackMessage.value = {
        show: true,
        valid: false,
        content: error_msg,
      };
      return;
    }
    try {
      let url = `/api/dic/add`;
      if (action.value === "edit") {
        url = `/api/dic/edit`;
      }
      let body = {
        ...formData,
        list: JSON.stringify(dicList.value),
      };
      if (action.value === "edit") {
        body._id = id.value;
      }
      await $fetch(url, {
        body: body,
        method: "POST",
      });
      callbackMessage.value = {
        show: true,
        valid: true,
        content: "操作成功",
      };
      table_ref.value && (table_ref.value as any).saveOK();
    } catch (e: any) {
      callbackMessage.value = {
        show: true,
        valid: false,
        content: e.data.message,
      };
    }
  },
};

const callbackMessage = ref({
  show: false,
  valid: true,
  content: "",
});

const action = ref("list");
const id = ref("");
const table_ref = ref(null);
const dicList = ref<{ code: string; label: string }[]>([
  {
    code: "",
    label: "",
  },
]);

// 字典列表--新增项
const dicList_addItem = (index: number) => {
  dicList.value.splice(index + 1, 0, {
    code: "",
    label: "",
  });
};

// 字典列表--删除项
const dicList_delItem = (index: number) => {
  dicList.value.splice(index, 1);
};

// 按钮--新增
const handle_add = () => {
  action.value = "add";
  // 恢复 dicList 的初始值
  dicList.value.splice(0, dicList.value.length, {
    code: "",
    label: "",
  });
};

// 按钮--编辑
const handle_edit = (row: any) => {
  action.value = "edit";
  dicList.value.splice(0, dicList.value.length);
  id.value = row._id;
  JSON.parse(row.list).forEach((item: { code: string; label: string }) => {
    dicList.value.push({
      code: item.code,
      label: item.label,
    });
  });
};
</script>

<template>
  <S-comMangeInfo
    ref="table_ref"
    :Model="Model"
    :PageConfig="PageConfig"
    @handle_add="handle_add"
    @handle_edit="handle_edit"
  >
    <template #list>
      <draggable
        v-model="dicList"
        item-key="code"
        handle=".cursor-grab"
        :animation="200"
      >
        <template #item="{ element, index }">
          <el-row :gutter="40" style="margin-bottom: 10px">
            <el-col :span="9">
              <el-input
                class="w-220px!"
                v-model="element.code"
                show-word-limit
                placeholder="键"
                ><template #prefix>
                  <el-icon class="cursor-grab"><Rank /></el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :span="9">
              <el-input
                class="w-220px!"
                v-model="element.label"
                show-word-limit
                placeholder="值"
              />
            </el-col>
            <el-col :span="6">
              <el-button
                :icon="Plus"
                size="small"
                circle
                @click="dicList_addItem(index)"
              />
              <el-button
                :disabled="index === 0"
                :icon="Minus"
                size="small"
                circle
                @click="dicList_delItem(index)"
              />
            </el-col>
          </el-row>
        </template>
      </draggable>
    </template>
    <template #table_list="slotProps">
      <el-select
        v-model="JSON.parse(slotProps.row.list)[0].code"
        placeholder="请选择"
      >
        <el-option
          v-for="item in JSON.parse(slotProps.row.list)"
          default
          :key="item.code"
          :label="item.label"
          :value="item.code"
        />
      </el-select>
    </template>
  </S-comMangeInfo>
  <S-msgWin :msg="callbackMessage" />
</template>
